<template>
  <page-frame>
    <div class="check01-in-main" style="vertical-align: top">
      <div class="toptitle">
        <div class="left">会员建档-会员登记</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="submitForm" v-show="way==1">保&nbsp存</el-button>
            <el-button class="lightGreenBtn" @click="saveForm" v-show="way==2">提交修改</el-button>
            <el-button @click="back">返&nbsp回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-form :model="formData.member" :rules="rules" ref="formData" label-width="100px">
        <!--基本信息-->
        <div class="panel">
          <div class="panel-title">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="grid-content bg-purple">基本信息</div>
              </el-col>
            </el-row>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="12">
                <el-form-item prop="memberName" label="姓名">
                  <el-input :disabled="!isAdd" v-model="formData.member.memberName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div class="avatar-uploader">
                  <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    :action="apiUrl+'/common/annex/?access_token='+token"
                    :on-success="handleAvatarSuccess"
                    :disabled="!isAdd"
                    name="file">
                    <img v-if="annexPic.url" :src="annexPic.url" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <template>
                    <el-radio-group v-model="formData.member.gender">
                      <el-radio :disabled="!isAdd" :label='0'>男</el-radio>
                      <el-radio :disabled="!isAdd" :label='1'>女</el-radio>
                    </el-radio-group>
                  </template>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="cardno">
                  <el-input :disabled="!isAdd" v-model="formData.member.cardno" @blur="queryMemInfor"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker
                    v-model="formData.member.birthday"
                    type="date"
                    :disabled="!isAdd"
                    placeholder="选择出生日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12" v-if="formData.member.type==2">
                <el-form-item label="手机号">
                  <el-input :disabled="!isAdd" v-model="formData.member.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formData.member.type==1">
                <el-form-item label="手机号" prop="phone">
                  <el-input :disabled="!isAdd" v-model="formData.member.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="会员编号">
                  <el-input :disabled="!isAdd" v-model="formData.member.memberNo" placeholder="自动生成" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="固定电话">
                  <el-input :disabled="!isAdd" v-model="formData.member.tel"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="会员类型" prop="type">
                  <el-select :disabled="!isAdd" v-model="formData.member.type" placeholder="请选择会员类型">
                    <el-option label="外部会员" value="1">外部会员</el-option>
                    <el-option label="入住会员" value="2">入住会员</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="居住地址" prop="addressLive">
                  <el-input :disabled="!isAdd" v-model="formData.member.addressLive"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="户籍地址">
                  <el-input :disabled="!isAdd" v-model="formData.member.addressPermanent"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="民族">
                  <el-input :disabled="!isAdd" v-model="formData.member.nation"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="籍贯">
                  <el-input :disabled="!isAdd" v-model="formData.member.nativePlace"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="政治面貌">
                  <el-select :disabled="!isAdd" v-model="formData.member.politics" placeholder="请选择政治面貌">
                    <el-option label="中共党员" value="1">中共党员</el-option>
                    <el-option label="共青团员" value="2">共青团员</el-option>
                    <el-option label="群众" value="3">群众</el-option>
                    <el-option label="其他党派" value="4">其他党派</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="宗教信仰">
                  <el-input :disabled="!isAdd" v-model="formData.member.faith"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="婚姻状况">
                  <el-select :disabled="!isAdd" v-model="formData.member.marriage" placeholder="请选择婚姻状况">
                    <el-option label="单身" value="1">单身</el-option>
                    <el-option label="已婚" value="2">已婚</el-option>
                    <el-option label="离异" value="3">离异</el-option>
                    <el-option label="丧偶" value="4">丧偶</el-option>
                    <el-option label="其他" value="5">其他</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文化程度">
                  <el-select :disabled="!isAdd" v-model="formData.member.education" placeholder="请选择文化程度">
                    <el-option label="博士" value="1">博士</el-option>
                    <el-option label="硕士" value=2>硕士</el-option>
                    <el-option label="本科" value="3">本科</el-option>
                    <el-option label="大专" value="4">大专</el-option>
                    <el-option label="中专和中技" value="5">中专和中技</el-option>
                    <el-option label="技工学校" value="6">技工学校</el-option>
                    <el-option label="高中" value="7">高中</el-option>
                    <el-option label="初中" value="8">初中</el-option>
                    <el-option label="小学" value="9">小学</el-option>
                    <el-option label="文盲与半文盲" value="10">文盲与半文盲</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="入住日期" prop="dateCheckin">
                  <el-date-picker
                    v-model="formData.member.dateCheckin"
                    type="date"
                    :disabled="!isAdd"
                    placeholder="选择入住日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-show="formData.member.type == 1">
                <el-form-item label="照护等级">
                  <el-select v-model="formData.member.lid" :disabled="!isAdd"  placeholder="请选择照护等级">
                    <el-option
                      v-for="item in gradeList"
                      :label="item.lname"
                      :value="item.lid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--亲属信息-->
        <div class="panel">
          <div class="panel-title">亲属信息 <span style="color: red;font-weight: 300;font-size: 12px;">（*必填）</span>
            <el-button class="fRight lightGreenBtn add" size="small" @click="addContacts" v-show="way==1||way==2">新增</el-button>
          </div>
          <div class="panel-content">
            <el-row>
              <el-col :span="24">
                <el-table
                  :data="formData.contactList"
                  border
                  max-height="361">
                  <el-table-column
                    prop="contactName"
                    label="姓名">
                  </el-table-column>
                  <el-table-column
                    prop="sex"
                    label="性别">
                  </el-table-column>
                  <el-table-column
                    prop="relationName"
                    label="关系">
                  </el-table-column>
                  <el-table-column
                    prop="phone"
                    label="亲属电话">
                  </el-table-column>
                  <el-table-column
                    prop="isUrgentName"
                    label="紧急联系人">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="通讯地址">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="80"
                    v-if="way==1||way==2">
                    <template scope="scope">
                      <el-button type="text" size="small" @click="delContacts(scope.row.index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--其他-->
        <div class="panel">
          <div class="panel-title">其他</div>
          <div class="panel-content">
            <el-row>
              <el-col :span="24">
                <el-form-item label="兴趣爱好">
                  <el-checkbox-group v-model="formData.hobbyList">
                    <el-checkbox :disabled="!isAdd" label="阅读">阅读</el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="体育"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="健身"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="写作"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="音乐"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="摄影"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="篮球"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="足球"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="排球"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="羽毛球"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="乒乓球"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="登山"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="自行车"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="唱歌"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" style="margin-left:0px;" label="美食/烹饪"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="绘画"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="书法"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="棋牌"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="旅游"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="舞蹈"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="钓鱼"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="跑步"></el-checkbox>
                    <el-checkbox :disabled="!isAdd" label="乐器"></el-checkbox>
                    <el-input :disabled="!isAdd" v-model="other" placeholder="其他" size="mini"></el-input>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="教育程度">
                  <div class="edu">
                    <el-input :disabled="!isAdd" v-model="formData.member.eduExperS" placeholder="毕业院校"></el-input>
                  </div>
                  <div class="edu">
                    <el-input :disabled="!isAdd" v-model="formData.member.eduExperZ" placeholder="专业"></el-input>
                  </div>
                  <div class="edu">
                    <el-input :disabled="!isAdd" v-model="formData.member.eduExperX" placeholder="学位"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <el-form-item label="工作经历">
                  <el-input
                    type="textarea"
                    :disabled="!isAdd"
                    autosize
                    placeholder="请输入工作经历"
                    v-model="formData.member.workExper">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="备注">
                  <el-input
                    type="textarea"
                    :disabled="!isAdd"
                    autosize
                    placeholder="请输入备注信息"
                    v-model="formData.member.remark">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <!--新增会员家属信息-->
      <el-dialog title="会员家属信息" v-model="leave" size="tiny" :close-on-click-modal="false">
        <el-form label-position="right" label-width="85px" :model="contactMember" :rules="contactRules" ref="contactMember">
          <el-form-item label="姓名" prop="contactName">
            <el-input v-model="contactMember.contactName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="contactMember.gender">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="关系" prop="relation">
            <el-select v-model="contactMember.relation" placeholder="请选择关系">
              <el-option label="父母子女关系" value="0">父母子女关系</el-option>
              <el-option label="亲友关系" value="1">亲友关系</el-option>
              <el-option label="夫妻关系" value="2">夫妻关系</el-option>
              <el-option label="其他" value="3">其他</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="contactMember.phone"></el-input>
          </el-form-item>
          <el-form-item label="是否是紧急联系人">
            <el-switch on-text="是" off-text="否" v-model="contactMember.isUrgent"></el-switch>
          </el-form-item>
          <el-form-item label="居住地址">
            <el-input v-model="contactMember.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                <el-button @click="leave = false">取 消</el-button>
                <el-button type="primary" @click="confirmContacts">确 定</el-button>
              </span>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script>
  import {apiUrl} from '../../config/env';
  import stepCheckIn from '../../components/stepbar/checkIn.vue';
  import checkInApi from '../../service/member/checkInApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';
  export default {
    data() {
      return {
        way:null,
        apiUrl,
        token:"",
        currentMemberId: null,
        stepData: "application",
        isAdd:false,
        option: "1",
        labelPosition: 'right',
        annexPic:{
          "annexId": 0,
          "url": ""
        },
        gradeList:[],
        formLabelAlign: {
          name: '',
          region: '',
          type: ''
        },
        other: "",
        contactMember: {
          "address": "string",
          "contactName": "string",
          "gender": "0",
          "isUrgent": true,
          "phone": "string",
          "relation": "0"
        },
        contactRules: {
          contactName: [
            {required: true, message: '请输入会员家属姓名', trigger: 'blur'}
          ],
          relation: [
            {required: true, message: '请选择关系', trigger: 'change'}
          ],
          phone: [
            {required: true, message: '请输入联系电话', trigger: 'blur'}
          ]
        },
        formData: {
          "annexId":null,
          "contactList": [],
          "hobbyList": [],
          "member": {
            "memberName": "",
            "gender": 0,
            "cardno": "",
            "birthday":  "",
            "type": "1",
            "lid":"",
            "phone": "",
            "tel": "",
            "memberNo": "",
            "addressLive": "",
            "nation": "",
            "addressPermanent": "",
            "politics": "",
            "faith":"",
            "marriage": "",
            "education": "",
            "workExper": "",
            "remark": "",
            "eduExper": "",
            "bigAvatar": "",
            "nativePlace": "",
            "smallAvatar": "",
            "memberId": null,
            "dateCheckin":null
          }
        },
        rules: {
          memberName: [
            {required: true, message: '请输入会员姓名', trigger: 'blur'},
            {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur'}
          ],
          gender: [
            {type:'number',required: true, message: '请选择性别', trigger: 'change'}
          ],
          cardno: [
            {required: true,validator: commonJs.validateCardno,trigger: 'blur'}
          ],
          birthday: [
            {type: 'date', required: true, message: '请选择生日', trigger: 'change'}
          ],
          type: [
            {required: true, message: '请选择会员类型', trigger: 'change'}
          ],
          phone:[
            {required: true, message: '请输入手机号', trigger: 'blur'}
          ],
          addressLive: [
            {required: true, message: '请输入居住地址', trigger: 'blur'}
          ],
          dateCheckin:[
            {type: 'date', required: true, message: '请选择入住日期', trigger: 'change'}
          ]
        },
        leave: false,
        tableData: [{
          name: '董静',
          sex: '男',
          relation: '朋友关系',
          emergencyContact: '师洋',
          skill: '是',
          weixin: '15001706435',
          add: "上海市浦东新区张江镇盛夏路秋月路115号"
        }],
        btnState: true,
        imageUrl: '',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: true,
          type: [],
          resource: '',
          desc: '',
        },
      }
    },
    methods: {
      init(){

        this.token = window.sessionStorage.getItem("access_token");
        this.way = this.$route.params.way;
        this.currentMemberId = this.$route.params.memberId;
        this.getGrade();
        if(this.way==0){//详情
          this.isAdd = false;
          this.getMemberDetail();
        }else if(this.way==1){//新增
          this.isAdd = true;
        }else if(this.way==2){//编辑
          this.isAdd = true;
          this.getMemberDetail();
        }
      },
      eduChange(){
        let eduExperArray = this.formData.member.eduExper.split(",");
        this.formData.member.eduExperS = eduExperArray[0];
        this.formData.member.eduExperZ = eduExperArray[1];
        this.formData.member.eduExperX = eduExperArray[2];
        this.other = this.formData.hobbyList[this.formData.hobbyList.length - 1];
      },
      eduChangeX(){
        this.formData.member.eduExper = this.formData.member.eduExperS + "," + this.formData.member.eduExperZ + "," + this.formData.member.eduExperX;
        this.formData.hobbyList.push(this.other);
      },
      /**
       * 获取会员登记详细信息
       */
      getMemberDetail(){
        let self = this;
        checkInApi.getMemberDetail(self.currentMemberId).then(function (response) {
          let b = new Date(response.body.data.member.birthday);
//          response.body.data.member.birthday = b.toISOString();
          response.body.data.member.birthday = b;
          let r = new Date(response.body.data.member.dateCheckin);
//          response.body.data.member.dateCheckin = r.toISOString();
          response.body.data.member.dateCheckin = r;
          self.formData = response.body.data;
          self.annexPic.url = response.body.data.member.bigAvatar+'?access_token=' + self.token;
          self.swapContacts();
        })
      },
      /**
       * 还原亲属信息字段
       */
      swapContacts(){
        for(var i =0;i<this.formData.contactList.length;i++){
          var contact = this.formData.contactList[i];
          if(contact.relation == 0 || contact.relation == '0'){
            contact.relationName = "父母子女关系";
          }else if(contact.relation == 1 || contact.relation == '1'){
            contact.relationName = "亲友关系";
          }else if(contact.relation == 2 || contact.relation == '2'){
            contact.relationName = "夫妻关系";
          }else if(contact.relation == 3 || contact.relation == '3'){
            contact.relationName = "其他";
          }

          if(contact.gender == 0 || contact.gender == '0'){
            contact.sex = "男";
          }else if(contact.gender == 1 || contact.gender == '1'){
            contact.sex = "女";
          }

          if(contact.isUrgent == true || contact.isUrgent == 1){
            contact.isUrgentName = "是";
          }else if(contact.isUrgent == false || contact.isUrgent == 0){
            contact.isUrgentName = "否";
          }
          this.formData.contactList[i] = contact;
        }
      },
      /**
       * 根据会员身份证Id查询详细信息
       */
      queryMemInfor(){
        let self = this;
        checkInApi.getMemberDetailId(self.formData.member.cardno).then(function (response) {
          if(response.data.data==''){

          }else{
            let b = new Date(response.body.data.member.birthday);
            response.body.data.member.birthday = b;
            let r = new Date(response.body.data.member.dateCheckin);
            response.body.data.member.dateCheckin = r;
            self.formData = response.data.data;
            self.swapContacts();
          }
        })
      },
      /**
       * 获取照护等级
       */
      getGrade(){
        let self = this;
        commonApi.getCareGrade().then(function(response){
          self.gradeList = response.body.data;
        })
      },
      /**
       * 提交会员登记
       */
      submitForm(){
        let self = this;
        self.eduChangeX();
        self.formData.annexId = self.annexPic.annexId;
        if(self.formData.contactList.length == 0){
          self.$message({
            message: '请填写亲属信息',
            type: 'warning'
          });
          return ;
        }
        self.$refs["formData"].validate((valid) => {
          if (valid) {
            checkInApi.checkInMember(self.formData).then(
              (response)=>{
              self.$router.push({name:"memberFile"});
            self.$message({
              message: '提交成功',
              type: 'success'
            });
          },
            (response)=>{
              self.$message({
                message: '提交失败',
                type: 'error'
              });
              let len = self.formData.hobbyList.length;
              self.formData.hobbyList.slice(len-1,1);
            }
          );
          } else {
            return false;
      }
      });
      },
      /**
       * 保存会员登记修改
       */
      saveForm(){
        let self = this;
        self.eduChangeX();
        self.formData.annexId = self.annexPic.annexId;
        if(self.formData.contactList.length == 0){
          self.$message({
            message: '请填写亲属信息',
            type: 'warning'
          });
          return ;
        }
        self.$refs["formData"].validate((valid) => {
          console.debug("valid:"+valid);
        if (valid) {
          checkInApi.checkInMember(self.formData).then(
            (response)=>{
            self.$message({
            message: '修改成功',
            type: 'success'
          });
          self.$router.push({name:"memberFile"});
        },
          (response)=>{
            self.$message({
              message: '提交失败',
              type: 'error'
            });
          }
        );
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      },
      /**
       * 新增联系人信息
       */
      addContacts(){
        this.leave = true;
        this.contactMember =    {
          "address": "",
          "contactName": "",
          "gender": '',
          "isUrgent": true,
          "phone": "",
          "relation": '',
        }
      },
      /**
       * 确认添加联系人信息
       */
      confirmContacts(){
        this.$refs["contactMember"].validate((valid) =>{
          if(valid){
            this.formData.contactList.push(this.contactMember);
            for(var contact of this.formData.contactList){
              switch(contact.relation){
                case "0":
                  contact.relationName = "父母子女关系";
                  break;
                case "1":
                  contact.relationName = "亲友关系";
                  break;
                case "2":
                  contact.relationName = "夫妻关系";
                  break;
                case "3":
                  contact.relationName = "其他";
                  break;
              };
              switch(contact.gender){
                case "0":
                  contact.sex = "男";
                  break;
                case "1":
                  contact.sex = "女";
                  break;
              };
              switch(contact.isUrgent){
                case true:
                  contact.isUrgentName = "是";
                  break;
                case false:
                  contact.isUrgentName = "否";
                  break;
              }
            };
            this.leave = false;
          }else{
            return false;
          }
        });
      },
      /**
       * 删除联系人信息
       */
      delContacts(index){
        this.formData.contactList.splice(index, 1);
      },
      /**
       * stepbar中获得menmber信息
       */
      getCheckMem(val){
        this.formData = val;
      },
      //获得上传图片
      handleAvatarSuccess(file){
        this.annexPic.annexId = file.data.annexId;
        this.annexPic.url = file.data.url+"?access_token="+ this.token;
      },
      //自定义上传图片
      uploadPhoto(row){
        let self = this;
        let _file = row.file;
        console.debug("_file"+_file);
        if(!/image\/\w+/.test(_file.type)){
          alert("请确保文件为图像类型");
          return false;
        }//判断类型是不是图片
        checkInApi.uploadPhoto(row).then(function (response) {
          self.annexPic.url =response.body.data.url;
          self.annexPic.annexId =response.body.data.annexId;
        });
      },
      back(){
        this.$router.push({name: "memberFile"});
      },
      handleCurrentChange(val) {

      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    },
    mounted: function () {
      this.init();
    },
    components: {
      stepCheckIn
    },
  }
</script>
<style>

  .check01-in-main .title {
    font-size: 28px;
    color: #111111;
    margin: 30px 50px 30px 50px;
    font-weight: bolder;
    padding-left: 15px;
    border-left: 5px solid #0cb7c6;
  }

  .check01-in-main .el-input.el-input--mini input {
    display: inline-block;
    width: 20%;
  }

  .el-tabs__item {
    font-weight: bolder;
    font-size: 16px;
  }

  .el-form {

  }

  .el-col-12 {
    position: relative;
  }

  .check01-in-main .btns {
    float: right;
  }

  .edu {
    display: inline-block;
  }

  .edu .el-input {
    width: 100% !important;
  }

  .el-input {
    width: 80%;
  }

  .input input {
    display: inline-block;
  }

  .el-icon-caret-top:before {
    content: "\E607" !important;
  }

  .el-select {
    display: block;
    position: relative;
  }

  .el-select .el-input .el-input__icon {
    top: 50% !important;
  }

  .avatar-uploader {
    border-radius: 6px;
    cursor: pointer;
    position: absolute;
    top: -9px !important;
    left: 120px;
    z-index: 5;
    height: 234px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 234px;
    line-height: 234px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 234px;
    display: block;
  }

</style>
